<template>
<!--  条件查询-->
  <el-form :inline="true" :model="providerList" >
    <el-form-item label="真实姓名：">
      <el-input v-model="providerList.name" />
    </el-form-item>
    <el-form-item label="登录账号：">
      <el-input v-model="providerList.phone" />
    </el-form-item>
    <el-form-item label="接单状态">
      <el-select
        v-model="providerList.canPickUp"
        placeholder="Select"
        size="large"
        style="width: 240px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="账号状态">
      <el-select
        v-model="providerList.status"
        placeholder="Select"
        size="large"
        style="width: 240px"
      >
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button @click="restart()">重置</el-button>
      <el-button type="primary" @click="show()">搜索</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="真实姓名" width="180" />
    <el-table-column prop="phone" label="登录账号" width="180" />
    <el-table-column prop="idCardNo" label="身份证号" width="180" />
    <el-table-column prop="cityName" label="服务城市" width="180" />
    <el-table-column prop="status" label="账号状态" width="180" #default="scope">
      <el-button link v-if="scope.row.status == 1">冻结</el-button>
      <el-button link v-if="scope.row.status == 0">正常</el-button>
    </el-table-column>
    <el-table-column prop="canPickUp" label="接单状态" width="180" #default="scope">
      <el-button link v-if="scope.row.canPickUp == 1">休息中</el-button>
      <el-button link v-if="scope.row.canPickUp == 0">接单中</el-button>
    </el-table-column>
    <el-table-column prop="certificationTime" label="认证时间" width="180" />
    <el-table-column prop="name" label="操作" width="180" #default="scope">
        <el-button type="primary" text="primary" v-if="scope.row.status==0" @click="dj(scope.row.id)">冻结</el-button>
        <el-button type="primary" text="primary" v-else @click="jd(scope.row.id)">解冻</el-button>
      <router-link :to="{path:'/serveProvider/serveProviderDetail',query:{id:scope.row.id} }">查看</router-link>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:current-page="providerList.pageNum"
    v-model:page-size="providerList.pageSize"
    :page-sizes="[5, 10, 15, 20]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script setup>
import {ref} from "vue";
import {serveProviderList,jie,dong} from '@/api/serveProvider/serveProvider'
import {ElMessage} from "element-plus";


const  total=ref(0)
const providerList=ref({
  pageNum:1,
  pageSize:5
})

// 接单状态
const options = [
  {
    value: 1,
    label: '休息中',
  },
  {
    value: 0,
    label: '接单中',
  }
]


// 账号状态
const options1 = [
  {
    value: 0,
    label: '正常',
  },
  {
    value: 1,
    label: '冻结',
  }
]

const handleSizeChange = (val) => {
  providerList.value.pageSize=val
  show()
}
const handleCurrentChange = (val) => {
  providerList.value.pageNum=val
  show()
}
const tableData = ref([])
function show(){
  serveProviderList(providerList.value).then(res=>{
    tableData.value=res.data.data.list
    total.value=res.data.data.total
  })
}
show()

// 重置
function restart(){
    providerList.value.name='',
    providerList.value.phone='',
    providerList.value.canPickUp=null,
    providerList.value.status=null
}

// 冻结
function dj(id){
  dong(id).then(res => {
    console.log(res)
    if (res.data.code=200){
      ElMessage.success('冻结成功')
      show()
    }else {
      ElMessage.error(res.data.errorMessage)
    }
  })

}



// 解冻
function jd(id){
  jie(id).then(res => {
    console.log(res)
    if (res.data.code=200){
      ElMessage.success('解冻成功')
      show()
    }else {
      ElMessage.error(res.data.errorMessage)
    }
  })

}


</script>
